import { Input, message, Table } from "antd";
import React, { useEffect, useState } from "react";

const keyDown: React.FC = () => {
    const handleKeyDown = (event) => {
        if(event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode === 190 || event.keyCode === 8) {
            return
        }
        message.warning('请输入有效金额')
    }
    useEffect(() => {
        return () => {
            document.removeEventListener('keydown', handleKeyDown)
        }
    }, [])
    const columns: {}[] = [
        {
            title: '月份',
            dataIndex: 'month',
            key: 'month',
            width: 150,
            fixed: 'left'
        },
        {
            title: '2025年01月',
            dataIndex: 'm1',
            key: 'm1',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm1')} />
        },
        {
            title: '2025年02月',
            dataIndex: 'm2',
            key: 'm2',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm2')} />
        },
        {
            title: '2025年03月',
            dataIndex: 'm3',
            key: 'm3',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm3')} />
        },
        {
            title: '2025年04月',
            dataIndex: 'm4',
            key: 'm4',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm4')} />
        },
        {
            title: '2025年05月',
            dataIndex: 'm5',
            key: 'm5',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm5')} />
        },
        {
            title: '2025年06月',
            dataIndex: 'm6',
            key: 'm6',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm6')} />
        },
        {
            title: '2025年07月',
            dataIndex: 'm7',
            key: 'm7',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm7')} />
        },
        {
            title: '2025年08月',
            dataIndex: 'm8',
            key: 'm8',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm8')} />
        },
        {
            title: '2025年09月',
            dataIndex: 'm9',
            key: 'm9',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm9')} />
        },
        {
            title: '2025年10月',
            dataIndex: 'm10',
            key: 'm10',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm11')} />
        },
        {
            title: '2025年11月',
            dataIndex: 'm11',
            key: 'm11',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm11')} />
        },
        {
            title: '2025年12月',
            dataIndex: 'm12',
            key: 'm12',
            width: 150,
            render: (text, record) => <Input value={text} onChange={(e) => handleChange(e.target.value, record.month, 'm12')} />
        }
    ]
    const [dataSource, setDataSource] = useState([
        {
            month: '2025-01',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-02',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-03',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-04',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-05',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-06',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-07',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-08',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-09',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-10',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-11',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        },
        {
            month: '2025-12',
            m1: 9999,
            m2: 9999,
            m3: 9999,
            m4: 9999,
            m5: 9999,
            m6: 9999,
            m7: 9999,
            m8: 9999,
            m9: 9999,
            m10: 9999,
            m11: 9999,
            m12: 9999
        }
    ])
    const handleChange = async (value, month, key) => {
        document.addEventListener('keydown', handleKeyDown)
        await new Promise(resolve => setTimeout(resolve, 10 * 10))
        const newList = [...dataSource]
        const list: any = newList.map(item => {
            if(item.month === month) {
                return { ...item, [key]: value }
            }
            return { ...item }
        })
        setDataSource(list)
    }
    return <Table columns={columns} dataSource={dataSource} pagination={false} sticky scroll={{x: 'max-content'}} />
}

export default keyDown